<template>
	<view>
		<view class="head">
			<view>
				<van-icon name="search" size="20" class="icon"></van-icon>
				<input class="input"  v-model="title" @input="get(title)"/>
				<text style="font-size: 32rpx; position: relative; bottom: 25rpx" @click="home">取消</text>
			</view>
			
		</view>
		
		
		<view class="videoList" v-show="ji == 1"><videoList :list="list2" :isHide="true" /></view>
		
		<view v-show="ji == 2">
		 <view class="main">
			<text class="history">大家都在搜</text>
			<view class="main-Search">
				<text key="item" v-for="item in categoryData" :key="item" @click="get(item.name)">{{item.name}}</text>
			</view>
		 </view>
		
		 <view class="footer">
			<text class="history">搜索历史</text>
			<scroll-view scroll-y>
				<view v-for="item in list" :key="item">
					<view class="item" @click="get(item.title)">
						<view>
							<text class="iconfont icon-naozhong"></text>
							{{item.title}}
						</view>
						<view class="delete iconfont icon-cancel-1-copy" @click="delete2(item.title)"></view>
					</view>
				</view>		
				
				<text class="ql">清除历史记录</text>
			</scroll-view>
		</view>
		</view>
		
		<view v-show="ji == 3">
			<image src="../../static/nodata2.png" mode="" style="display: block; margin: 0 auto;"></image>
			<view style="    color: #777;
    font-size: 36rpx;
    text-align: center;">暂时没有数据</view>
		</view>
		
	</view>
</template>

<script setup>
// vue3小程序生命周期函数

import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { SearchListApi, addSearchListApi, deteleSearchListApi, Search } from '../../api/modules/Search';
import videoList from '@/components/videoList/videoList.vue'
import { categoryData } from '../../utils/history';
import { reactive, toRefs } from 'vue'

const state = reactive({ 
	list: [],
	list2: [],
	title: '',
	isShow: true,
	ji: 2
	
})

const get = async (i) => {
	if(state.isShow) {
		state.ji = 1
		state.title = i.trim()
		await addSearchListApi({uid:1, title:i})
		const data =  await Search(i)
		state.list2 = data.message
		if(!data.message.length) {
			state.ji = 3
		}
		if(!state.title.length) {
			state.ji = 2
		}
	}
}

const delete2 = async (i) => {
	state.isShow = false
	await deteleSearchListApi({uid:1, title:i})
	const {data} =  await SearchListApi(1)
	state.list = data
	state.isShow = true
}

const home = () => {
  uni.switchTab({
  	url: '/pages/home/home'
  })
}

// 页面加载
onLoad(async (message) => {
	const {data} =  await SearchListApi(1)
	state.list = data
	console.log(data);
})

// 页面显示
onShow(() => {
	
})

// 页面隐藏
onHide(() => {
	
})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {
	
})

const { list,title,list2,ji } = toRefs(state)
</script>

<style lang="scss">
	.history {
		font-size: 32rpx;
	}
	
	.head {
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #999 ;
		.input {
			height: 70rpx;
			background-color: #f4f4f4;
			margin-right: 30rpx;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding-left: 70rpx;
			width: 515rpx;
			display: inline-block;
		}
		.icon {
			font-size: 20px;
			position: relative;
			left: 57rpx;
			bottom: 17rpx;
			background-color: #f4f4f4;
		}
	}
	
	.main {
		margin-top: 60rpx;
		padding: 0 20rpx;
		.main-Search {
			margin-top: 40rpx;
			text {
				display: inline-block;
				background-color: rgb(220, 220, 220, 0.4);
				padding: 10rpx 30rpx;
				margin: 10rpx;
				border-radius: 5rpx;
				font-size: 26rpx;
			}
		}
	}
	
	.footer {
		margin-top: 80rpx;
		padding: 0 20rpx;
		scroll-view {
			height: 300rpx;
			margin-top: 30rpx;
			image {
				width: 30rpx;
				height: 30rpx;
			}
			.item {
				margin-left: 10rpx;
				color: #555;
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: 20rpx 0rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid rgb(220, 220, 220, 0.8);
				.delete {
					margin-right: 40rpx;
					font-size: 24rpx;
					line-height: 40rpx;
				}
			}
		}
		.ql {
			text-align: center;
			display: block;
			padding: 20rpx 0rpx;
			color: #777;
			font-size: 28rpx;
		}
	}
	
	
@font-face {
  font-family: "iconfont"; /* Project id 3457604 */
  src: url('//at.alicdn.com/t/c/font_3457604_qu66hxdcl7.woff2?t=1668646585209') format('woff2'),
       url('//at.alicdn.com/t/c/font_3457604_qu66hxdcl7.woff?t=1668646585209') format('woff'),
       url('//at.alicdn.com/t/c/font_3457604_qu66hxdcl7.ttf?t=1668646585209') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-cancel-1-copy:before {
  content: "\e61c";
}

.icon-naozhong:before {
  content: "\e61a";
}

.icon-bilibili:before {
  content: "\e6b4";
}

	
</style>
